<template>
  <div class="register-box">
    <heard />
    <div class="bg">
      <div v-if="!isGo" class="login-form">
        <div class="tip">
          JUST LOGIN FIRST
        </div>
        <span>
          Find the Million Opportunities to Level Up u’r Careers
        </span>
        <el-form ref="ruleFormRef" label-position="top" class="form" :model="form">
          <el-form-item label="">
            <el-input v-model="form.account" class="enterInput" clearable>
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Message />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="form.password" show-password type="password" class="enterInput" clearable>
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="login-btn" @click="goFun">
          LOG IN
        </div>
        <div class="bottom-tip">
          <span>No account? It only takes</span>
          <div>1 minute</div>
          <span>to create a new one</span>
        </div>
      </div>
      <div v-else class="login-form">
        <div class="tip">
          GET STARTED
        </div>
        <span class="spanTs">
          Complete registration in
        </span>
        <div class="ts">
          1 Minute
        </div>
        <el-form ref="ruleFormRef2" label-position="top" class="form form2" :model="form2">
          <el-form-item label="">
            <el-input v-model="form2.account" style="width: 50%;" placeholder="Name" class="enterInput" clearable>
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker v-model="form2.data" style="width: 100%;" type="date" placeholder="Pick a day" />
          </el-form-item>
          <el-input v-model="form2.emil" class="enterInput" clearable placeholder="Your Email">
            <template #prefix>
              <el-icon class="el-input__icon">
                <Message />
              </el-icon>
            </template>
          </el-input>
          <el-row :gutter="20" style="margin-top: 27px;">
            <el-col :span="12">
              <el-form-item label="">
                <el-input v-model="form2.password" class="enterInput" clearable placeholder="Create Password">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="">
                <el-input v-model="form2.passwordSure" class="enterInput" clearable placeholder="Repeat Password">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="login-btn btnTs" @click="chooseSkillsFun">
          LOG IN
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Lock, Message, User } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/modules/user.ts'

const UseUser = useUserStore()
const ruleFormRef = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const router = useRouter()
const form = ref({
  account: '',
  password: '',
})
const form2 = ref({
  data: '',
  account: '',
  emil: '',
  password: '',
  passwordSure: '',
})
const isGo = ref(false)
function goFun() {
  if (form.value.account !== '' && form.value.password !== '') {
    isGo.value = true
  }
  else {
    ElMessage({
      message: '请填写完整信息',
      type: 'warning',
    })
  }
}
function chooseSkillsFun() {
  UseUser.userInfo = form2.value
  UseUser.userInfo.imgs='s-2'
  router.push('/skillsOne')
}
</script>

<style lang="scss" scoped>
.register-box {
  display: flex;
  flex-direction: column;
  background-color: #F4F9FD;
  height: 100%;

  .bg {
    width: 100%;
    height: 50%;
    background: url("@/assets/pic/registerBg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;

    ::v-deep .login-form {
      position: absolute;
      left: 50%;
      bottom: -70%;
      width: 544px;
      height: 508px;
      background: #FFFFFF;
      box-shadow: 3px -5px 40px 1px rgba(205, 205, 212, 0.1);
      border-radius: 20px 20px 20px 20px;
      transform: translate(-50%, 0);
      padding: 40px 20px 60px 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .tip {
        margin-bottom: 18px;
        font-size: 14px;
        color: #B5B5BE;
      }

      &>span {
        font-weight: normal;
        color: #171725;
        font-size: 24px;
        width: 410px;
        text-align: center;
        margin-bottom: 30px;
      }

      .form {
        width: 100%;

        .el-form-item {
          margin-bottom: 47px;
        }

        .enterInput {
          .el-input__wrapper {
            background: transparent;
            box-shadow: none;
            border-bottom: 1px solid rgba(166, 166, 166, 1);
          }

          .is-focus {
            box-shadow: none !important;
          }
        }
      }
      .form2{
        .el-form-item {
          margin-bottom: 27px;
        }
      }
      .login-btn {
        margin-bottom: 34px;
        background: #5598F8;
        border-radius: 10px 10px 10px 10px;
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #FFFFFF;
        font-size: 25px;
      }
      .btnTs{
        margin-top: 20px;
      }
      .bottom-tip {
        display: flex;
        align-items: center;

        &>span {
          color: #92929D;
          font-size: 18px;
        }

        &>div {
          color: #000000;
          font-size: 25px;
          margin: 0 5px;
        }
      }

      .ts {
        color: #E221A8;
        font-size: 30px;
        margin-bottom: 35px;
      }

      .el-date-editor {
        .el-input__wrapper {
          background: transparent;
          box-shadow: none;
          border-bottom: 1px solid rgba(166, 166, 166, 1);
        }

        .is-focus {
          box-shadow: none !important;
        }
      }
      .spanTs{
        margin: 0;
      }
    }
  }
}
</style>
